<template>
  <div class="warpper">
    <van-swipe class="swipe block" @change="onChange">
      <van-swipe-item v-for="(item, index) in swipes" :key="index">
        <img v-lazy="item.url + index" alt="">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ swipes.length }}</div>
      </template>
    </van-swipe>

    <div class="block flex-y" style="padding: 10px;">
      <div class="flex-x flex-content-space-bwtween">
        <div class="price">¥{{ goods.price }}</div>

        <div class="flex-x">
          <div class="flex-y">
            <div class="grey">266</div>
            <div class="grey">浏览</div>
          </div>
          <div class="flex-y">
            <div class="grey">266</div>
            <div class="grey">销量</div>
          </div>
        </div>
      </div>
      <div class="desc">
        不失商务，不失娱乐
      </div>
    </div>

    <div class="block flex-x flex-content-space-bwtween" style="padding: 20px;">
      <div>选择规格</div>

      <van-icon name="arrow" />
    </div>

    <div class="block pic">
      <div class="title">
        图文详情
      </div>

      <div class="line"></div>

      <div class="content">
        <img src="https://picsum.photos/300/800" alt="">
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" @click="sku.show = !sku.show" text="加入购物车" />
      <van-goods-action-button type="danger" @click="sku.show = !sku.show" text="立即购买" />
    </van-goods-action>

    <van-sku v-model="sku.show" :sku="sku.value" :goods="sku.goods" :goods-id="sku.id" :hide-stock="false"
      @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" />
  </div>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      swipes: new Array(5).fill({
        url: 'https://picsum.photos/1000/200?'
      }),
      current: 0,
      goods: {
        price: '1234'
      },
      sku: {
        show: false,
        value: {
          tree: [
            {
              k: '内存容量', // skuKeyName：规格类目名称
              k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
              v: [
                {
                  id: '1', // skuValueId：规格值 id
                  name: '32+8', // skuValueName：规格值名称
                  imgUrl: 'https://picsum.photos/100/203', // 规格类目图片，只有第一个规格类目可以定义图片
                  previewImgUrl: 'https://picsum.photos/100/202', // 用于预览显示的规格类目图片
                },
                {
                  id: '2',
                  name: '64+16',
                },
                {
                  id: '3',
                  name: '128+64',
                }
              ],
            },
            {
              k: '颜色', // skuKeyName：规格类目名称
              k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
              v: [
                {
                  id: '1', // skuValueId：规格值 id
                  name: '红色', // skuValueName：规格值名称
                },
              ],
            },
          ],
          // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [
            {
              id: 2259, // skuId
              s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
              s2: '1',
              price: 100, // 价格（单位分）
              stock_num: 110 // 当前 sku 组合对应的库存
            },
            {
              id: 2253, // skuId
              s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
              s2: '1',
              price: 100, // 价格（单位分）
              stock_num: 110 // 当前 sku 组合对应的库存
            },
            {
              id: 2259, // skuId
              s1: '3', // 规格类目 k_s 为 s1 的对应规格值 id
              s2: '1',
              price: 100, // 价格（单位分）
              stock_num: 110 // 当前 sku 组合对应的库存
            },
          ],
          price: '1.00', // 默认价格（单位元）
        },
        goods: {
          picture: 'https://picsum.photos/100/201'
        },
        id: '123'
      },
      // properties: [
      //   // 商品属性
      //   {
      //     k_id: 123, // 属性id
      //     k: '加料', // 属性名
      //     is_multiple: true, // 是否可多选
      //     v: [
      //       {
      //         id: 1222, // 属性值id
      //         name: '珍珠', // 属性值名
      //         price: 100000, // 属性值加价
      //         text_status: 0, // 属性启用/禁用状态 0 - 禁用，1 - 启用
      //       },
      //       {
      //         id: 1223,
      //         name: '椰果',
      //         price: 100000,
      //         text_status: 1,
      //       },
      //     ],
      //   },
      // ],
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    onBuyClicked(skuData) {
      console.log(skuData);
      this.$router.push({
        name: 'createOrder',
        params: skuData
      })
    },
    onAddCartClicked(skuData) {
      this.$toast.success('添加购物车成功');
      console.log(skuData);
    },
  },
  mounted() {
    console.log(this.$route.params.id);
  }
}
</script>

<style lang="scss" scoped>
.warpper {
  background-color: #F8F8F8;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 50px;

  >.block {
    background-color: #fff;
    border-radius: 10px;
  }
}

.price {
  color: chocolate;
  font-size: 20px;
  font-weight: bold;
}

.desc {
  margin-bottom: 10px;
  margin-top: 15px;
}

.grey {
  font-size: 10px;
  color: #999;
}

.swipe {
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  .van-swipe-item {
    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }
}

.pic {
  padding: 15px 20px;

  .title {
    margin-bottom: 15px;
  }

  .line {
    height: 0;
    border-bottom: 1px solid #9d9b9b;
    margin-bottom: 10px;
  }

  img {
    width: 100%;
  }
}
</style>